<script>
	import Vue from 'vue'
	export default {
		globalData: {
			innerAudioContext: null
		},
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')

			// #ifdef H5
			this.$indexedDB.openSqlite('test', 'signalChat').then(res => {
				console.log(res)
				Vue.prototype.$db = res
			})
			// #endif

			// #ifndef H5
			//监听数据库是否开启
			let open = this.$sqlite.isOpen()
			console.log(open)
			if (!open) {
				this.$sqlite.openSqlite().then(res => {
					this.$sqlite.userInfoSQL('tableImg1')
				})
			} else {
				this.$sqlite.userInfoSQL('tableImg1')
			}

			// #endif
		},
		mounted() {
			//初始创建报警音频，并全局保存
			let innerAudioContext = uni.createInnerAudioContext();
			innerAudioContext.loop = true;
			innerAudioContext.autoplay = true;
			innerAudioContext.src = '/static/voice/alarm.mp3';
			getApp().globalData.innerAudioContext = innerAudioContext
			getApp().globalData.innerAudioContext.stop()
		},
		onHide: function() {
			console.log('App Hide')
			// this.$sqlite.deleteInformationType('tableImg1','name','buildingPage')
			// this.$sqlite.deleteInformationType('tableImg1','name','largeScreenBackground')
			// this.$sqlite.deleteInformationType('tableImg1','name','planPage117')
			// this.$sqlite.closeSQL()
		}
	}
</script>

<style lang="scss">
	uni-page {
		//重新设置全局默认字体大小
		font-size: 14px;
	}
	uni-toast{
		z-index: 9999;
	}
	//远程控制样式
	.remote-control{
		min-width: 750px;
	}


	.pointer{
		cursor: pointer;
	}
	//chimee播放器 隐藏loading一直显示问题
	.correct{
		display: none !important;
	}

	/*每个页面公共css */
	::-webkit-scrollbar {
		width: 5px !important;
		/* 纵向滚动条*/
		height: 5px !important;
		/* 横向滚动条 */
		background-color: #0A1722;
	}

	::-webkit-scrollbar-track-piece {
		background-color: #0A1722 !important;
	}

	/*定义滚动条轨道 内阴影*/
	::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
		background-color: #0A1722;
	}

	/*定义滑块 内阴影*/
	::-webkit-scrollbar-thumb {
		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
		background-color: rgba(2, 195, 255, 0.2000);
		border-radius: 3px;
	}

	/* #ifdef H5 */
	/* 谷歌自动填充背景设置 */
	.uni-input-input:-webkit-autofill {
		transition: background-color 99999s ease-in-out 0s !important;
	}

	/* 谷歌自动填充文本触发样式 */
	.uni-input-input::first-line {
		color: #fff !important;
	}

	/* 	.uni-input-input:-internal-autofill-selected{
		-webkit-text-fill-color:#fff !important;
	} */
	/* #endif */

	uni-page {
		overflow: auto;
	}

	uni-page-body {
		width: 100%;
		height: 100%;
	}

	.houseBox {
		position: relative;
		cursor: pointer;
		// width: 370px;
		// height: 332px;
	}

	//主页点位显示框样式
	.home {
		.alarmSituation {
			border-radius: 50%;
			position: absolute;
			left: 50%;
			top: 35%;
			width: 18px;
			height: 18px;
			transform: rotateX(45deg);
			// transform: translateX(-20px) translateY(-20px) rotateX(45deg);
		}

		.alarmSituationOne {
			background: #006AFF;
		}

		.alarmSituationTwo {
			box-shadow: inset 0px 0px 8px 0px rgba(0, 106, 255, 1);
			-moz-box-shadow: inset 0px 0px 8px 0px rgba(0, 106, 255, 1);
			-webkit-box-shadow: inset 0px 0px 8px 0px rgba(0, 106, 255, 1);
			animation: warn 1.5s infinite;
		}

		.normalTitle {
			.normalTitleIn{
				// position: absolute;
				width: 100px;
				text-align: center;
				padding: 15px 5px;
				font-size: 14px;
				// top: -102px;
				// left: -45px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				background-color: rgba(54, 106, 255, 0.7);
				// border: 1px solid rgba(2, 122, 255, 0.59);
			}
			position: absolute;
			width: 112px;
			text-align: center;
			padding: 6px;
			font-size: 14px;
			top: -117px;
			left: -45px;
			background: rgba(21,83,151,0.41);
			border: 1px solid rgba(2,122,255,0.59);
			// overflow: hidden;
			// white-space: nowrap;
			// text-overflow: ellipsis;
			// background-color: rgba(21,83,151,0.41);
			// border: 1px solid rgba(2, 122, 255, 0.59);

			// background: linear-gradient(to left,#4B79FF,#4B79FF) left top no-repeat,
			// linear-gradient(to bottom,#4B79FF,#4B79FF) left top no-repeat,
			// linear-gradient(to left,#4B79FF,#4B79FF) right top no-repeat,
			// linear-gradient(to bottom,#4B79FF,#4B79FF) right top no-repeat,
			// linear-gradient(to left,#4B79FF,#4B79FF) left bottom no-repeat,
			// linear-gradient(to bottom,#4B79FF,#4B79FF) left bottom no-repeat,
			// linear-gradient(to left,#4B79FF,#4B79FF) right bottom no-repeat,
			// linear-gradient(to bottom,#4B79FF,#4B79FF) right bottom no-repeat;
			// background-size: 2px 6px,6px 2px,2px 6px,6px 2px;
		}

		.titleInfo {
			position: absolute;
			width: 200px;
			height: 89px;
			padding: 3px;
			// top: -140px;
			top: -141px;
			left: -90px;
			background-color: rgba(0, 106, 255, 0.41);

			.titleInfoTop {
				line-height: 28px;
				background: linear-gradient(90deg, #006AFF 0%, rgba(0, 106, 255, 0) 100%);
				display: flex;
				align-items: center;
				font-size: 14px;

				// .uni-tooltip {
				// 	width: 160px;
				// }

				.img {
					width: 20px;
					height: 20px;
					margin: 0 3px;
				}

				.titleD {
					flex: 1;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}

			.titleBox {
				height: 58px;
				padding: 0 10px;
				display: flex;
				align-items: center;
			}

			.titleInfoB {
				flex: 1;
				line-height: 18px;
				display: -webkit-box;
				font-size: 12px;
				-webkit-box-orient: vertical;
				/*设置方向*/
				-webkit-line-clamp: 2;
				/*设置超过为省略号的行数*/
				overflow: hidden;
			}
		}

		.lineInfo {
			position: absolute;
			top: -52px;
			left: 8px;
			width: 2px;
			height: 61px;
			background: linear-gradient(180deg, #006AFF 0%, rgba(0, 106, 255, 0) 100%);
		}
	}


	#home {

		//报警样式
		.houseAlarm {
			.alarmSituationOne {
				background: #FF3D3D;
			}

			.alarmSituationTwo {
				box-shadow: inset 0px 0px 8px 0px rgba(255, 57, 57, 1);
				-moz-box-shadow: inset 0px 0px 8px 0px rgba(255, 57, 57, 1);
				-webkit-box-shadow: inset 0px 0px 8px 0px rgba(255, 57, 57, 1);
				animation: warn 1.5s infinite;
			}

			.titleInfo {
				background-color: rgba(137, 25, 26, 0.4100);
				border: 1px solid rgba(255, 61, 61, 0.5900);
				.img {
					background: url(./static/alarmIcon.png) no-repeat center;
					background-size: 100% 100%;
				}
				.titleInfoTop {
					background: linear-gradient(90deg, #C03939 0%, rgba(192, 57, 57, 0) 100%);
				}
			}

			.lineInfo {
				background: linear-gradient(180deg, #FF3D3D 0%, rgba(176, 2, 4, 0) 100%);
			}
		}

		//故障样式
		.houseFault {
			.alarmSituationOne {
				background: #FF9D1C;
			}

			.alarmSituationTwo {
				box-shadow: inset 0px 0px 8px 0px rgba(255, 157, 28, 1);
				-moz-box-shadow: inset 0px 0px 8px 0px rgba(255, 157, 28, 1);
				-webkit-box-shadow: inset 0px 0px 8px 0px rgba(255, 157, 28, 1);
				animation: warn 1.5s infinite;
			}

			.titleInfo {
				background-color: rgba(121, 69, 2, 0.4100);
				border: 1px solid rgba(255, 157, 28, 1);
				.img {
					background: url(./static/faultIcon.png) no-repeat center;
					background-size: 100% 100%;
				}
				.titleInfoTop {
					background: linear-gradient(90deg, #D18B22 0%, rgba(209, 139, 34, 0) 100%);
				}
			}

			.lineInfo {
				background: linear-gradient(180deg, #FF9D1C 0%, rgba(255, 157, 28, 0) 100%);
			}
		}
	}

	@keyframes warn {
		0% {
			transform: scale(1) rotateX(45deg);
			opacity: 1;
		}

		50% {
			transform: scale(1.8) rotateX(45deg);
			opacity: 0.8;
		}

		100% {
			transform: scale(2.6) rotateX(45deg);
			opacity: 0.5;
		}
	}

	 .amap-controls .amap-geolocation-con {
	 	//隐藏高德地址控件
	 	display: none;
	 }

	.amap-logo {
		//隐藏高德logo
		display: none !important;
	}

	//更改uniapp表格样式

	//更改下拉框样式
	.uni-select {
		border: 1px solid rgba(2, 195, 255, 0.7);
		height: 30px;
	}

	::v-deep .el-select-dropdown__list {
		background: rgba(0, 125, 219, 0.14);
		border-radius: 2px;
		backdrop-filter: blur(4px);
	}


	::v-deep .el-select-dropdown .el-select-dropdown__item.hover,
	.el-select-dropdown .el-select-dropdown__item.selected.hover,
	.el-select-dropdown .el-select-dropdown__item:hover,
	.el-select-dropdown.is_multiple .el-select-dropdown__item.hover,
	.el-select-dropdown.is_multiple .el-select-dropdown__item.selected.hover,
	.el-select-dropdown.is_multiple .el-select-dropdown__item:hover {
		background: rgba(0, 149, 255, 0.25) !important;
		backdrop-filter: blur(4px);
		color: #fff;
	}

	::v-deep.el-select-dropdown .el-select-dropdown__item.selected,
	.el-select-dropdown.is_multiple .el-select-dropdown__item.selected{
		background: rgba(0, 125, 219, 0.14) !important;
		color: rgba(255, 255, 255, 0.7) !important;
	}
	//增加分页器手型
	.page-pagination{
		cursor: pointer;
	}
	//增加日期选择器手型
	.el-range-editor--mini.el-input__inner{
		cursor: pointer;
	}
	//更改时间框样式
	.el-date-range-picker .el-picker-panel__body{
		background: #042743;
		border-radius: 2px;
		backdrop-filter: blur(4px);
	}
	.el-date-table th{
	  color: rgba(255, 255, 255, 0.7) !important;
	}
	::v-deep .el-picker-panel .el-date-table td span{
		background-color:rgba(0, 0, 0, 0) ;
	}
	::v-deep .el-select-dropdown{
		border:none !important;
	}
	::v-deep .el-picker-panel{
		border: none !important;
	}
</style>
